// 我们自己的router
// 1.声明插件 VueRouter
let Vue
class VueRouter {
    constructor(options) {
        // 1.保存路由选项
        this.$options = options

        // current一个初始值
        // 如何使current 成为一个响应式数据
        // 此方法可以给一个对象指定一个响应式的属性
        Vue.util.defineReactive(this, 'current', window.location.hash.slice(1) || '/')
        // 2.监控hash的变化
        window.addEventListener('hashchange', () => {
            // hash:#/about
            this.current = window.location.hash.slice(1)
            console.log(this.current);
        })
    }
}
// 参数1 Vue构造函数
VueRouter.install = function (_Vue) {
    // 传入构造函数,可以对其进行扩展
    Vue = _Vue
    // 1.注册$router,让所有组件都可访问

    // 混入 Vue.mixin({})
    Vue.mixin({
        beforeCreate() {
            // 延迟执行  router实例和vue实例都创建完毕

            if (this.$options.router) {
                // 如果存在说明是根实例
                Vue.prototype.$router = this.$options.router
            }

        }
    })
    // 2. 注册两个全局组件 router-link,router-view
    Vue.component('router-link', {
        props: {
            to: {
                type: String,
                default: '',
                required: true
            }
        },
        render(h) {
            // h是render 函数调用时,框架传入的createElement
            // 等同于react中的createElement,返回vdom

            // this.$slots.default 匿名插槽的api
            // <a href="#/home">xxx</a>
            // return <a href={'#'+ this.to}>{this.$slots.default}</a>
            return h('a', {
                // attrs 渲染函数api
                attrs: {
                    href: '#' + this.to
                }
            }, this.$slots.default)
        }
    })
    Vue.component('router-view', {
        render(h) {
            let component = null;
            // 1.获取当前url的hash部分
            // this.$router.current
            // 2.根据hash部分从路由表中获取对应的组件
            const route = this.$router.$options.routes.find(
                (route) => route.path === this.$router.current
            )
            if (route) {
                component = route.component
            }
            return h(component)
        }
    })
};

export default VueRouter